import React from 'react';
import { query, getInfo } from '../services/flink';

import { Table, Button, Tag, Tooltip, Modal } from 'antd';
class FlinkPage extends React.Component {

    state = {
        list: [],
        visible: false,
        info: {

        },
        columns: [
            {
                title: 'ID',
                dataIndex: 'id',
                key: 'id'
            },
            {
                title: '网站名称',
                dataIndex: 'title',
                key: 'title',
            },
            {
                title: '图标',
                dataIndex: 'img',
                key: 'img',
                render: (value, item) => (
                    <Tooltip placement="topLeft" title={item.title}>
                        <img src={value} style={{ height: 60 }} />
                    </Tooltip>
                )
            },
            {
                title: '链接地址',
                key: 'link',
                dataIndex: 'link',
                render: value => <a target="_blank" href={value}>{value}</a>
            },
            {
                title: '展示顺序',
                key: 'order',
                dataIndex: 'order',
                render: value => (<Tag color="green" key={value}>{value}</Tag>)
            },
            {
                title: '操作',
                key: 'action',
                render: (item) => (
                    <Button type="primary" size="small" onClick={() => this.showModal(item.id)}>查看</Button>
                ),
            }
        ]
    }

    showModal = async (id) => {
        const { data } = await getInfo(id);
        this.setState({
            info: data.data
        });

        this.setState({
            visible: true,
        });
    };

    handleOk = e => {
        // console.log(e);
        this.setState({
            visible: false,
        });
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    render() {
        return (
            <div>
                <Table rowKey={item => item.id} columns={this.state.columns} dataSource={this.state.list} />
                {/* 模态框 */}
                <Modal
                    title={this.state.info.title}
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确定"
                    cancelText="取消"
                >
                    <p>ID:{this.state.info.id}</p>
                    <p>链接名称:{this.state.info.title}</p>
                    <p>链接地址:{this.state.info.link}</p>
                    <p>显示顺序:{this.state.info.order}</p>
                    <p>
                        <img src={this.state.info.img} alt=""/>
                    </p>

                </Modal>
            </div>
        )
    }

    componentWillMount() {
        console.log('componnetWillMount');
        this.queryList();
    }

    async queryList() {
        const { data } = await query();
        this.setState({
            list: data.data
        });
    }
}

export default FlinkPage;